window.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const focus = document.querySelector('.focus');
    const arrowL = focus.querySelector('.arrow-l');
    const arrowR = focus.querySelector('.arrow-r');
    const ul = focus.querySelector('ul');
    const ol = focus.querySelector('.circle');

    // 左右箭头显隐
    focus.addEventListener('mouseenter', function () {
        arrowL.style.display = 'block';
        arrowR.style.display = 'block';
        clearInterval(timer);
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display = 'none';
        arrowR.style.display = 'none';
        autoPlay();
    });

    // 填充小圆点
    for (let i = 0; i < ul.children.length; i++) {
        let li = document.createElement('li');
        ol.appendChild(li);
        // 设置索引
        li.setAttribute('data-index', i);
    }
    ol.children[0].className = 'current';

    // 箭头计数
    let num = 0;
    // 圆点索引计数
    let circle = 0;
    // 定时器
    let timer;

    // 点击小圆点
    ol.addEventListener('click', function (e) {
        if (e.target.nodeName == 'LI') {
            e.target.parentNode.querySelector('.current').className = '';
            e.target.className = 'current';
            // 获取索引
            let index = e.target.getAttribute('data-index');
            num = index;
            circle = index;
            animate(ul, - index * focus.offsetWidth);
        }
    });

    // 克隆节点，无缝连接
    ul.appendChild(ul.children[0].cloneNode(true));
    // 设置节流阀
    let flag = true;

    // 点击右箭头
    arrowR.addEventListener('click', function () {
        if (flag) {
            // 关闭节流阀
            flag = false;
            if (num == ul.children.length - 1) {
                num = 0;
                ul.style.left = 0;
            }
            num++;
            circle++;
            if (circle == ol.children.length) circle = 0;
            // 圆点选中
            ol.querySelector('.current').className = '';
            ol.children[circle].className = 'current';
            // 动画图片
            animate(ul, - num * focus.offsetWidth, function () {
                // 打开节流阀
                flag = true;
            });
        }
    });

    // 点击左箭头
    arrowL.addEventListener('click', function () {
        if (flag) {
            // 关闭节流阀
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = - num * focus.offsetWidth + 'px';
            }
            num--;
            circle--;
            if (circle == -1) circle = ol.children.length - 1;
            // 圆点选中
            ol.querySelector('.current').className = '';
            ol.children[circle].className = 'current';
            // 动画图片
            animate(ul, - num * focus.offsetWidth, function () {
                // 打开节流阀
                flag = true;
            });
        }
    });

    // 动画函数
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            let step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }

    // 自动播放
    function autoPlay() {
        timer = setInterval(function () {
            arrowR.click();
        }, 2000);
    }
    autoPlay();
});